<style type="text/css">
dl{overflow: hidden;zoom: 1;margin-bottom: 20px;font-family: '微软雅黑';font-size: 14px;}
dt{float: left;width: 100px;font-size: 14px;padding: 3px 0 0 0;color: #333;text-align: right;}
dd input[type='text'],select{height: 28px;font-size: 12px;padding: 0 2px;margin: 0 10px 0 10px;box-sizing: border-box;}
dd input[type='text']{width: 200px;}
dd span{height: 28px;padding: 0 2px;margin: 0 10px 0 10px;box-sizing: border-box;}
table tbody tr td{text-align: center;}
</style>

<!-- form -->
<script type="text/javascript" src="/Public/js/jquery.form.min.js"></script>

<div class="main_top">
   <a href="javascript:" onclick="menuShow(this,'shortLink')" class="bg_blue" >短连接</a>
   <a href="javascript:" onclick="menuShow(this,'group')" >分组</a>
   <a href="javascript:" onclick="menuShow(this,'companyInfo')" >公司信息</a>
</div>
<div class="form">
	<div id="group" class="scrollShow" style="display: none;">
		<table class="tablelist">
			<foreach name="list" item="parent">
				<tr>
					<td>
					<h3 style="display: inline-block; border-right: 1px red solid; text-align: center; width: 20%;">{$parent.name}</h3>
					<div style="float: right; width: 70%;">
					<foreach name="parent.child" item="child">
						<p style="font-size: 14px;"><span style="display: inline-block; width: 120px;"> {$child.name} </span><a href="{:U(MODULE_NAME.'/Webconf/info',array('id'=>$child['id']))}"> 编辑 </a></p>
					</foreach>
					</div>
					</td>
				</tr>
			</foreach>
		</table>
	</div>
	<div id="companyInfo" class="scrollShow" style="display: none;">
		<form method='post' id="form" action="{:U(MODULE_NAME. '/Webconf/group')}">
			<dl>
			  <dt>PCLogo：</dt>
			  <dd>
				<div style="width: 300px; height: 120px; border: 1px #CCC solid; position: relative; overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer; left: 10px;">

				  	<div  class="fileupload"  onclick="uploadImgHtml(this,'companyInfo','pcLogo')" style=" position: absolute;width: 300px;height: auto; right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
				        <img src="{$info.pcLogo}" width="300" height="120">
				        <input type="hidden" name="pcLogo" value="{$info.pcLogo}">
				  	</div>
				</div>
			  </dd>
			</dl>
			<dl>
			  <dt>移动端Logo：</dt>
			  <dd>
			  	<div style="width: 120px; height: 120px; border: 1px #CCC solid; position: relative; overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer; left: 10px;">
				  	<div  class="fileupload" onclick="uploadImgHtml(this,'companyInfo','mobileLogo')" style=" position: absolute;width: 120px;height: auto; right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
				        <img src="{$info.mobileLogo}" width="120" height="120">
				        <input type="hidden" name="mobileLogo" value="{$info.mobileLogo}">
				  	</div>
				</div>
			  </dd>
			</dl>
			<dl>
			  <dt>公司名称：</dt>
			  <dd><input type="text" name="companyName" class="inp_default" value="{$info.companyName}" ></dd>
			</dl>
			<dl>
			  <dt>联系电话：</dt>
			  <dd><input type="text" name="companyPhone" class="inp_default" value="{$info.companyPhone}" ></dd>
			</dl>
			<dl>
			  <dt>备案号：</dt>
			  <dd><input type="text" name="recordCode" class="inp_default" value="{$info.recordCode}" ></dd>
			</dl>
			<dl>
			  <dt>版权：</dt>
			  <dd><input type="text" name="copyRight" class="inp_default" value="{$info.copyRight}" ></dd>
			</dl>
			<dl>
			  <dt>二维码：</dt>
			  <dd>
			  	<div style="width: 120px; height: 120px; border: 1px #CCC solid; position: relative; overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer; left: 10px;">
	              	<div  class="fileupload" onclick="uploadImgHtml(this,'companyQRcode','companyQRcode')" style=" position: absolute;width: 120px;height: auto; right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
		                <img src="{$info.companyQRcode}" width="120" height="120">
		                <input type="hidden" name="companyQRcode" value="{$info.companyQRcode}">
	              	</div>
	           </div>
			  </dd>
			</dl>
			<dl>
				<dt> </dt>
				<dd>
					<input type="submit" class="button-green" value="保 存" >
				</dd>
			</dl>
		</form>
	</div>
	<div id="shortLink" class="scrollShow" >
		<div class="operate2">
		  <ul>
		    <li onclick="shortlinklayer()"><span class="icon-add01"></span>新增短连接</li>
		  </ul>
		  <div class="clear"></div>
		</div>
		<table class="list">
			<thead>
		  		<tr>
					<th>官网地址</th>
					<th>短连接</th>
					<th>时间</th>
					<th>操作</th>
				</tr>
			</thead>
		    <tbody>
				<foreach name='linklist' item='v'>
		        <tr>
		           <td>{$v.webUrl}</td>
		           <td class="title" >{$v.shortlink}</td>
		           <td>{$v.createTime|date='Y-m-d H:i:s',###}</td>
		           <td><a href="javascript:;" onclick="shortlinklayer('{$v.webUrl}','{$v.shortlink}')">编辑</a></td>
		        </tr>
		        </foreach>
		 	</tbody>
		</table>
	</div>
</div>

<script type="text/javascript">
/**
 * [menuShow description]
 * @param  {[type]} obj [description]
 * @param  {[type]} id  [description]
 * @return {[type]}     [description]
 */
function menuShow(obj,id)
{
	$('.main_top a').removeClass('bg_blue');
	$(obj).addClass('bg_blue');
	$('.scrollShow').hide('slow/400/fast');
	$('#'+id).show('slow/400/fast');
}

/**
 * [shortlinklayer description]
 * @param  {[type]} webUrl    [description]
 * @param  {[type]} shortlink [description]
 * @return {[type]}           [description]
 */
function shortlinklayer(webUrl,shortlink)
{
  if(!webUrl)              webUrl       = '';
  if(!shortlink)           shortlink    = '';

  var html = '';
      html+='<div id="shortlinkHtml">';
        html+='<dl>';
          html+='<dt>官网链接：</dt>';
          html+='<dd><input type="text" name="webUrl" class="inp_default" value="'+webUrl+'" onkeyup="getshort()"></dd>';
        html+='</dl>';
        html+='<dl>';
          html+='<dt>短连接：</dt>';
          html+='<dd><input type="text" name="shortlink" class="inp_default" value="'+shortlink+'" readonly="readonly"></dd>';
        html+='</dl>';
      html+='</div>';


    //页面层-自定义
    var Div = layer.open({
        type: 1,
        title: '新增/编辑短连接',
        area: ['400px', '200px'],
        shift: 0, //从左动画弹出
        content: html,
        btn:['确定','取消'],
        yes: function(index){
        	getshortdata();
        },
        cancel: function(){
          layer.close(Div);
        }
    });
}
/**
 * [getshortdata description]
 * @return {[type]} [description]
 */
function getshortdata()
{
	var obj = $('#shortlinkHtml');
	var webUrl = obj.find('input[name="webUrl"]').val();
	var shortlink = obj.find('input[name="shortlink"]').val();
	var data = {'type':'add','webUrl': webUrl , 'shortlink' : shortlink};
	getshortlink('add',data);

}

/**
 * [getshort description]
 * @return {[type]} [description]
 */
function getshort()
{
	var webUrl = $('#shortlinkHtml').find('input[name="webUrl"]').val();
	var data = { 'type' : 'short' ,'webUrl' : webUrl};
	getshortlink('short',data);
}



/**
 * [getshortlink description]
 * @param  {[type]} type [description]
 * @param  {[type]} data [description]
 * @return {[type]}      [description]
 */
function getshortlink(type,data)
{
	$.ajax({
		url: "{:U(MODULE_NAME.'/Webconf/getshortlink')}",
		type: 'POST',
		dataType: 'json',
		data: data,
		success: function (data) {
			if(data.valid == true)
			{
				switch (type)
				{
					case 'add':
						layer.msg(data.state, {icon: 1});
						location.reload();
						break;
					default:
						$('#shortlinkHtml').find('input[name="shortlink"]').val(data.info.shortlink);
						break;
				}
			}
			else
			{
				layer.msg(data.state, {icon: 2});
			}
		}
	})
}


/**
 * [uploadImgHtml description]
 * @return {[type]} [description]
 */
function uploadImgHtml(obj,type,thumbImages)
{
  var sizeType = 0;
  if(thumbImages == 'bigPic')sizeType = 1;
  var cityID   = 0;
  if($('select[name="cityID[]"]:first').length > 0 )
  {
    cityID = $('select[name="cityID[]"]:first').val();
  }

  //iframe层-父子操作
  var Div = layer.open({
              type: 2,
              area: ['800px', '400px'],
              content: ['/Home/Public/uploadImages.html?&type='+type+'&sizeType='+sizeType+'&cityID='+cityID,'no'],
              btn: ['确认','取消'], //按钮
              yes: function(index, layero){ //或者使用btn1
                  //按钮【按钮一】的回调

                  var objlayer = $(window.frames['layui-layer-iframe'+index].document);
                  var objlayercurrimg = objlayer.find("#selectImg ul li .curr");
                  if(objlayercurrimg.length <= 0)
                  {
                    var imgUrl = objlayer.find("#dndArea input[name='fileData[]']").val();
                  }
                  else
                  {
                    var imgUrl = objlayercurrimg.parent().find('img').attr('src')
                  }

                  $(obj).empty();
                  $(obj).append('<img src="'+imgUrl+'" width="100%" height="100%"><input type="hidden" name="'+thumbImages+'" class="headerImg" value="'+imgUrl+'">');
                  layer.close(Div);
              },
              cancel: function(index){ //或者使用btn2
                  //按钮【按钮二】的回调
                  layer.close(Div);
              }
          });
}

</script>